import React from 'react'

import Dygraph from 'dygraphs'
import randomColor from 'randomcolor'

const colors = randomColor({ count: 10, format: 'rgba' })

class SingleChart extends React.PureComponent {
  componentDidMount() {
    this.chart = new Dygraph(
      document.getElementById(this.props.id),
      this.props.series.list,
      {
        labels: this.props.series.label,
        connectSeparatedPoints: true,
        colors
        // visibility: [false, true, false]
        // drawPoints: true
        // customBars: true
      }
    )
  }

  componentWillUnmount() {
    if (this.chart) {
      this.chart.destroy()
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.series) {
      this.chart.updateOptions({
        file: nextProps.series.list
      })
    }
  }

  render() {
    return pug`
      div(id=this.props.id style={ width: '100%'})
    `
  }
}

export default SingleChart
